<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

// 表单引用
const formRef = ref();

// 店铺信息表单数据
const formData = ref({
  shopName: '',
  shopType: 1, // 1-个人店铺 2-企业店铺
  isSelf: 1, // 1-自营 0-非自营
  introduction: ''
});

// 表单验证规则
const rules = {
  shopName: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' },
    { min: 2, max: 20, message: '店铺名称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  shopType: [
    { required: true, message: '请选择店铺类型', trigger: 'change' }
  ],
  // isSelf: [
  //   { required: true, message: '请选择经营模式', trigger: 'change' }
  // ],
  introduction: [
    { required: true, message: '请输入店铺介绍', trigger: 'blur' },
    { min: 10, max: 500, message: '店铺介绍长度在 10 到 500 个字符', trigger: 'blur' }
  ]
};

// 店铺类型选项
const shopTypeOptions = [
  { label: '个人店铺', value: 1 },
  { label: '企业店铺', value: 2 }
];

// 经营模式选项
const isSelfOptions = [
  { label: '自营', value: 1 },
  { label: '非自营', value: 0 }
];

// 监听props变化，回填数据
watch(
  () => props.info,
  (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
      // 回填店铺信息
      Object.keys(formData.value).forEach(key => {
        if (newVal[key] !== undefined) {
          formData.value[key] = newVal[key];
        }
      });
    }
  },
  { immediate: true, deep: true }
);

// 表单验证方法
const checkForm = async () => {
  try {
    await formRef.value.validate();
    return true;
  } catch (error) {
    ElMessage.warning('请完善店铺信息');
    throw new Error('店铺信息验证失败');
  }
};

// 暴露表单数据和验证方法给父组件
defineExpose({
  get formData() {
    return formData.value;
  },
  checkForm
});
</script>

<template>
  <div class="form">
    <h4 class="title"><span></span> 店铺信息</h4>
    <p class="tips">
      <b><i>*</i> 开店申请</b> 
      <span class="ru">请填写店铺基本信息</span> 
    </p>
    
    <el-form 
      ref="formRef" 
      :model="formData" 
      :rules="rules" 
      label-width="120px"
      class="shop-form"
    >
      <el-form-item label="店铺名称" prop="shopName">
        <el-input 
          v-model="formData.shopName" 
          placeholder="请输入店铺名称"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="店铺类型" prop="shopType">
        <el-radio-group v-model="formData.shopType">
          <el-radio 
            v-for="option in shopTypeOptions" 
            :key="option.value" 
            :label="option.value"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      
<!--      <el-form-item label="经营模式" prop="isSelf">-->
<!--        <el-radio-group v-model="formData.isSelf">-->
<!--          <el-radio -->
<!--            v-for="option in isSelfOptions" -->
<!--            :key="option.value" -->
<!--            :label="option.value"-->
<!--          >-->
<!--            {{ option.label }}-->
<!--          </el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      
      <el-form-item label="店铺介绍" prop="introduction">
        <el-input 
          v-model="formData.introduction" 
          type="textarea" 
          :rows="4"
          placeholder="请输入店铺介绍，让客户更好地了解您的服务特色"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      
    </el-form>
    
    <div class="shop-info-notice">
      <div class="notice-content">
        <h5>温馨提示</h5>
        <p>• 店铺名称一旦确定，后续修改需要审核</p>
        
        <p>• 请确保店铺介绍真实有效，突出您的服务优势</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form {
  width: 1200px;
  margin: 0 auto 20px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;

  .title {
    font-size: 20px;
    font-weight: 600;
    color: #191E28;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;

    span {
      width: 4px;
      height: 20px;
      background: #1DBF73;
      border-radius: 2px;
      margin-right: 12px;
    }
  }

  .tips {
    font-size: 14px;
    color: rgba(25, 30, 40, 0.6);
    margin: 0 0 32px 0;
    line-height: 20px;

    b {
      color: #191E28;
      font-weight: 500;

      i {
        color: #FF4D4F;
        font-style: normal;
      }
    }

    .ru {
      margin-left: 16px;
    }
  }

  .shop-form {
    margin-bottom: 32px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #191E28;
    }

    :deep(.el-input__wrapper) {
      border-radius: 8px;
    }

    :deep(.el-textarea__inner) {
      border-radius: 8px;
    }

    .unit {
      margin-left: 8px;
      color: rgba(25, 30, 40, 0.6);
      font-size: 14px;
    }
  }

  .shop-info-notice {
    background: rgba(29, 191, 115, 0.05);
    border: 1px solid rgba(29, 191, 115, 0.2);
    border-radius: 8px;
    padding: 24px;

    .notice-content {
      h5 {
        font-size: 16px;
        font-weight: 500;
        color: #191E28;
        margin: 0 0 16px 0;
      }

      p {
        font-size: 14px;
        color: rgba(25, 30, 40, 0.8);
        margin: 0 0 8px 0;
        line-height: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 20px 16px;
    border-radius: 12px;

    .title {
      font-size: 18px;
    }

    .shop-form {
      :deep(.el-form-item) {
        margin-bottom: 20px;
      }
    }

    .shop-info-notice {
      padding: 16px;
    }
  }
}
</style>